<!--
 * @Description: 锁定元素
-->

<template>
  <!-- <Tooltip :content="$t('quick.lock')" v-if="mSelectMode === 'one'">
    <Button v-if="isLock" @click="doLock(false)" icon="md-lock" type="text"></Button>
    <Button v-else @click="doLock(true)" icon="md-unlock" type="text"></Button>
  </Tooltip> -->
  <div class="tool-item" :data-name="isLock ? '解除' : '锁定'" v-if="mSelectMode === 'one'">
    <!-- <button v-if="isLock" @click="doLock(false)" icon="md-lock" type="text">解除</button>
    <button v-else @click="doLock(true)" icon="md-unlock" type="text">锁定</button> -->
    <svg v-if="isLock" @click="doLock(false)" t="1683138417002" class="icon" viewBox="0 0 1024 1024" version="1.1"
      xmlns="http://www.w3.org/2000/svg" p-id="41057" width="200" height="200">
      <path
        d="M800 448H704V320c0-106.4-85.6-192-192-192S320 213.6 320 320h64c0-70.4 57.6-128 128-128s128 57.6 128 128v128H224c-17.6 0-32 14.4-32 32v384c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V480c0-17.6-14.4-32-32-32zM512 736c-35.2 0-64-28.8-64-64s28.8-64 64-64 64 28.8 64 64-28.8 64-64 64z"
        p-id="41058"></path>
    </svg>
    <svg v-else @click="doLock(true)" t="1683138382699" class="icon" viewBox="0 0 1024 1024" version="1.1"
      xmlns="http://www.w3.org/2000/svg" p-id="40052" width="26" height="26">
      <path
        d="M860.069521 429.487623h-73.242947v-170.422692C786.826574 116.337371 670.888872 0.272064 528.240764 0.272064c-142.650515 0-258.720638 116.065307-258.720638 258.792867v170.422692H196.339779c-35.281619 0-63.879618 28.612445-63.879618 63.91814v466.606275c0 35.368294 28.597999 63.983146 63.879618 63.983147h663.79234c35.29125 0 63.821834-28.614852 63.821835-63.983147V493.405763c-0.004815-35.310511-28.590776-63.91814-63.884433-63.91814zM564.114664 738.867504v101.889098c0 4.552855-3.765556 8.388233-8.385825 8.388233h-54.91355c-4.678053 0-8.446016-3.837785-8.446017-8.388233v-101.889098c-25.800316-13.201114-43.672259-39.665939-43.672259-70.68362 0-43.888947 35.613874-79.584681 79.481153-79.584682 43.932285 0 79.548567 35.695734 79.548566 79.584682 0.062599 31.020089-17.811752 57.482507-43.612068 70.68362z m123.476036-309.379881H368.883605v-166.202091c0-87.912723 71.55278-159.501618 159.417351-159.501618s159.287337 71.588895 159.287337 159.501618l0.002407 166.202091z"
        fill="#272536" p-id="40053"></path>
    </svg>
  </div>
</template>

<script>
import select from '../mixins/select';

const lockAttrs = [
  'lockMovementX',
  'lockMovementY',
  'lockRotation',
  'lockScalingX',
  'lockScalingY',
];
export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
      isLock: false,
    };
  },
  created() {
    this.event.on('selectOne', (items) => {
      this.isLock = !items[0].hasControls;
      // eslint-disable-next-line prefer-destructuring
      this.mSelectActive = items[0];
    });
  },
  methods: {
    doLock(isLock) {
      isLock ? this.lock() : this.unLock();
    },
    lock() {
      // 修改自定义属性
      this.mSelectActive.hasControls = false;
      // 修改默认属性
      lockAttrs.forEach((key) => {
        this.mSelectActive[key] = true;
      });

      this.mSelectActive.selectable = false;

      this.isLock = true;
      this.canvas.c.renderAll();
    },
    unLock() {
      // 修改自定义属性
      this.mSelectActive.hasControls = true;
      // 修改默认属性
      lockAttrs.forEach((key) => {
        this.mSelectActive[key] = false;
      });
      this.mSelectActive.selectable = true;

      this.isLock = false;
      this.canvas.c.renderAll();
    },
  },
};
</script>

<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
